<template>
  <div>
    <!-- 顶部区域 -->
    <van-nav-bar title="前端最牛逼.vant" left-text="返回" left-arrow @click-left="onClickLeft" />
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list v-model="aLoading" :finished="finished" finished-text="没有更多了" @load="onLoad" :offset="100"  :immediate-check="status" >
        <van-cell v-for="item in goodsListAs" :key="item.id">
          <van-row type="flex" justify="space-between" @click="goTolistDetail(item.id)">
            <van-col span="24">
              <van-image :src="item.img_url" lazy-load></van-image>

              <van-col tag="p">{{item.title}}</van-col>
              <van-row tag="div" class="bottom_box" type="flex">
                <van-col>
                  <span>￥{{item.market_price}}</span>
                  <s>￥{{item.sell_price}}</s>
                </van-col>
                <van-col>
                  <van-row type="flex" justify="space-between">
                    <span>热卖中</span>
                    <span>剩余{{item.stock_quantity}}件</span>
                  </van-row>
                </van-col>
              </van-row>
            </van-col>
          </van-row>
        </van-cell>
        <div></div>
       
      </van-list>
    </van-pull-refresh>



         



      <!-- 底部固定栏 -->

        <van-tabbar v-model="active">
          <van-tabbar-item icon="home-o" to="/home">首页</van-tabbar-item>
          <van-tabbar-item icon="search" dot to="/member">会员</van-tabbar-item>
          <van-tabbar-item icon="friends-o" info="5" to="/shopcar">购物车</van-tabbar-item>
          <van-tabbar-item icon="setting-o" info="20" to="/search">设置</van-tabbar-item>
        </van-tabbar>
  </div>

</template>

<script>
import Vue from 'vue'
import { Lazyload } from 'vant';

// options 为可选参数，无则不传
Vue.use(Lazyload);
export default {
  data() {
    return {
      active: 0,
      aLoading: false,
      finished: false,
      pageindex: 1,
      goodsListAs: [],
      isLoading: false,
      status:false,
      
       
    };
  },
  created() {
    this.goodsList();
  },
  methods: {
    //返回
    onClickLeft() {
      this.$router.push('/home')
    },
    async goodsList() {
      const { data: res } = await this.$http.get(
        "/api/getgoods?pageindex=" + this.pageindex
      );

      // console.log(res);
      
      
    this.goodsListAs= this.goodsListAs.concat(res.message)
    

      if(this.goodsListAs.length >15){
        this.goodsListAs.splice(15)
      }

     if( this.pageindex < 2){
        this.pageindex++;
     }

      // console.log(this.imgAr);
      
      // console.log(res,'1111111111');
      
      // console.log(this.goodsListAs,'22222222222222');
    },
    onRefresh() {
      setTimeout(() => {
        this.goodsList();
        this.$toast("刷新成功");
        this.isLoading = false;
      }, 1000);
    },
    goTolistDetail(id) {
      this.$router.push('/goods/detail/'+id)
    },
    onLoad() {
      // console.log("55555555555");
      // 异步更新数据
      setTimeout(() => {
        this.goodsList();

        // 加载状态结束
        this.aLoading = false;
        

        // 数据全部加载完成
        if (this.pageindex !== 1) {
               this.finished = true;
          //  this.finishedUp = true;
	        // this.loadText = "加载完成";
     
        }
      }, 1000);
    }
  }
};
</script>

<style lang="less" scrped>

.van-image {
  min-height: 180px;
  padding: 10px;
  box-sizing: border-box;
}
// .van-list div:nth-last-child(4)
//   // background-color: #000;
//   margin-bottom: 40px;
//   left: -10px

.van-list {
  display: flex;
  margin: 0 10px;
  padding: 0;
  justify-content: space-between;
  flex-wrap: wrap;

  .van-cell {
    flex: 1;
    width: 46%;
    min-width: 46%;
    max-width: 46%;
    margin-top: 20px;
    padding: 0;
    border: 1px solid #cccccc;
    text-align: center;
    .bottom_box {
      height: 49px;
      background-color: #eee;
      width: 100%;
      padding: 0 10px;
      flex-wrap: wrap;
      :first-child {
        // flex: 1;
        // width: 100%;
        // height: 20px;
        :first-child {
          color: red;
          margin-right: 15px;
        }
      }
      :last-child {
        width: 100%;
        span {
          width: 100%;
        }

        :first-child {
          color: #000;
          margin: 0;
        }
      }
    }
  }
  p {
    padding: 0 10px;
    box-sizing: border-box;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-box-orient: vertical;

    -webkit-line-clamp: 2;
    line-clamp: 2;
    height: 49px;
    display: -webkit-box;
  }
  .van-list__finished-text{
    display: block;
    width: 100%;
    // height: 50px;
    // position: absolute;
    // bottom: 50px;
 
    margin-bottom: 50px;
  }
}
 

// #pic
//   display: flex;
//   align-content: center;
//   justify-content: center;
//
</style>